<template>
        <div class="menu-bar">
            <transition name="slide-up">
              <div 
                class="menu-wrapper" 
                v-show="ishow"
                :class="{'hide-box-shadow':isettingshow||!ishow}"
              >
                <div class="icon-wrapper">
                    <span class="iconfont icon">&#xe62f;</span>
                </div>
                <div class="icon-wrapper">
                    <span class="iconfont icon">&#xe613;</span>
                </div>
                <div class="icon-wrapper icon">
                    <span class="iconfont" @click="showSetting(1)">&#xe622;</span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon" @click="showSetting(0)">A</span>
                </div>
              </div>
            </transition>
            <transition name="slide-up">
              <div class="setting-wrapper" v-show="isettingshow">
                <div class="setting-font-size" v-if="showTag===0">
                    <div 
                      class="preview" 
                      :style="{fontSize:fontSizeList[0].fontSize+'px'}"
                    >
                    A
                    </div>
                    <div class="select">
                      <div 
                        class="select-wrapper"
                        v-for="(item,index) of fontSizeList"
                        :key="index"
                        @click="setFontSize(item.fontSize)"
                      >
                        <div class="line"></div>
                        <div class="point-wrapper">
                            <div class="point" v-show="defaultFontSize===item.fontSize">
                                <div class="small-point"></div>
                            </div>
                        </div>
                        <div class="line"></div>
                      </div>
                    </div>
                    <div 
                      class="preview"
                      :style="{fontSize:fontSizeList[fontSizeList.length-1].fontSize+'px'}"
                    >
                    A
                    </div>
                </div>
                <div class="setting-theme" v-else-if="showTag===1">
                    <div 
                      class="setting-theme-item" 
                      v-for="(item,index) of themeList"
                      :key="index"
                      @click="setTheme(index)"
                    >
                        <div 
                          class="preview" 
                          :style="{background:item.style.body.background}"
                          :class="{'no-border':item.style.body.background!=='#fff'}"
                        >
                        </div>
                        <div class="text" :class="{'selected':index===defaultTheme}">{{item.name}}</div>
                    </div>
                </div>
              </div>
            </transition>
        </div>
        
</template>

<script>
export default {
    name:'Manubar',
    props:{
        ishow:{
            type:Boolean,
            default:false
        },
        fontSizeList:Array,
        defaultFontSize:Number,
        themeList:Array,
        defaultTheme:Number
    },
    data(){
        return{
            isettingshow:false,
            showTag:0
        }
    },
    methods:{
        showSetting(tag){
            this.isettingshow=true
            this.showTag=tag;
        },
        hiddleSetting(){
            this.isettingshow=false
        },
        setFontSize(fontSize){
            this.$emit('setFontSize',fontSize)
        },
        setTheme(index){
            this.$emit('setTheme',index)
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/style/global';

.menu-bar{
    .menu-wrapper{
        position: absolute;
        bottom:0;
        left:0;
        z-index: 101;
        width:100%;
        height: px2rem(48);
        background: #fff;
        display:flex;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.171);
        &.hide-box-shadow{
            box-shadow: none;
        }
        .icon-wrapper{
            flex:1;
            @include center;
            .icon{
                font-size:px2rem(18);
            }
        }
    }
    .setting-wrapper{
        z-index: 101;
        position: absolute;
        bottom: px2rem(48);
        left:0;
        width:100%;
        height: px2rem(60);
        box-shadow: 0 -5px 5px 3px rgba(0, 0, 0, 0.171);
        background:white;
        .setting-font-size{
            display:flex;
            height:100%;
            .preview{
                flex:0 0 px2rem(40);
                @include center;
            }
            .select{
                display:flex;
                 flex:1;
              .select-wrapper{
                flex:1;
                display:flex;
                align-items: center;
                &:first-child{
                    .line{
                        &:first-child{
                            border-top:none
                        }
                    }
                }
                &:last-child{
                    .line{
                        &:last-child{
                            border-top:none
                        }
                    }
                }
                .line{
                    flex:1;
                    height:0;
                    border-top:px2rem(1) solid #ccc;
                }
                .point-wrapper{
                    position: relative;
                    flex: 0 0 0;
                    width: 0;
                    height: px2rem(7);
                    border-left:px2rem(1) solid #ccc;
                    .point{
                        position: absolute;
                        top:px2rem(-8);
                        left:px2rem(-10);
                        width: px2rem(20);
                        height: px2rem(20);
                        border-radius: 50%;
                        background: #fff;
                        border:px2rem(1) solid #ccc;
                        box-shadow: 0 px2rem(4) px2rem(4) black;
                        @include center;
                        .small-point{
                            width:px2rem(5);
                            height: px2rem(5);
                            border-radius: 50%;
                            background: black;
                        }
                    }
                }
            }
        }
      }
      .setting-theme{
          height:100%;
          display:flex;
          .setting-theme-item{
              flex:1;
              display:flex;
              flex-direction: column;
              box-sizing: border-box;
              padding: px2rem(5);
              .preview{
                  flex:1;
                  border:px2rem(1) solid #ccc;
                  &.no-border{
                      border:none;
                  }
              }
              .text{
                  flex:0 0 px2rem(20);
                  font-size: px2rem(14);
                  color:#ccc;
                  @include center;
                  &.selected{
                      color:#333;
                  }
              }
          }
      }
    }
}
</style>